<ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets"
  xmlns:f="http://java.sun.com/jsf/core" xmlns:p="http://primefaces.org/ui" xmlns:h="http://java.sun.com/jsf/html"
  xmlns:pr="http://java.sun.com/jsf/composite/totororo">
 
<script>
function handleDrop(event, ui) {
	$(event.target).find("p").html("En cours d'ajout...");
	$('.loader img').css('display', 'block');
	setTimeout(function () {
		$(event.target).find("p").html("Glissez les livres ici!");
		$('.loader img').css('display', 'none');
    }, 3500);
}
</script>
 					
	<pr:localeChooser/>
	<h:panelGroup layout="block" class="login-click" rendered="#{clientController.loggedIn != true}">    	
	    <pr:popup type="login" link="true" popup="true"/>	
	    <h:outputText value="ou "/>
	    <pr:popup type="register" link="true" popup="true" />
  	</h:panelGroup>
	<h:form id="login-header">
		<h:panelGroup rendered="#{clientController.loggedIn}">
			<pr:photo type="client" elementId="#{currentClient.id}" size="avatar"/>
			#{currentClient.login}
			<h:commandLink action="#{clientController.doLogout}" value="#{strings['logout']}" />
			<p:spacer width="5" height="0" />
			<h:commandLink action="#{clientController.profil}" value="Mon profil" />
		</h:panelGroup>
	</h:form>
  
  	<h:form>
	  	<h:commandLink outcome="home">
			<a href="#{facesContext.externalContext.requestContextPath}/faces/front/index.xhtml">
				<img src="#{facesContext.externalContext.requestContextPath}/resources/images/bookstore-logo.jpg" />
			</a>
		</h:commandLink>
	</h:form>

	<!-- Avec menu -->
	<h:form>
		 	<p:tabMenu id="menu" >
			<ui:repeat var="c" value="#{categoryController.categories}">
				<p:menuitem ajax="false" value="#{c.title}" action="#{categoryController.selectCategory(c.id)}" />
			</ui:repeat>
			</p:tabMenu>
	</h:form>

	<!--  Sans menu --> 	
	<h:form>
	 <ui:repeat var="c" value="#{categoryController.categories}" >
		<tr>
				<td>
					<h:commandLink action="#{categoryController.selectionCategory}">
						<h:outputText value="#{c.title}" />
						<f:param name="categoryId" value="#{c.id}" />
					</h:commandLink>
				</td>
			</tr>
	   </ui:repeat>
	</h:form>


	<ui:param name="display_cart" value='#{(cartController.order.size != 0)}' />
<ui:param name="is_cart_page" value='#{(facesContext.viewRoot.viewId == "/front/cart/index.xhtml")}' />
 		
<h:panelGroup layout="block" rendered="${!is_cart_page}" styleClass="panier">
	<p:outputPanel autoUpdate="true">
		<h:outputText id="panier-empty" rendered="#{!display_cart}" value="Panier vide" />
		<h:outputText styleClass="panier-title" rendered="#{display_cart}" value="Votre panier" />
		
		<h:dataTable rendered="#{display_cart}" value="#{cartController.order.items}" var="item" columnClasses="qte,title,price">
	       <h:column>
	           <f:facet name="header" >
	               <h:outputText value="Qté"/>
	           </f:facet>    
	           <h:outputText value="#{item.quantity}"/>
	       </h:column>
	        <h:column>
	           <f:facet name="header" >
	               <h:outputText class="title" value="Livre"/>
	           </f:facet>    
	           <h:outputText value="#{item.book.title}"/>
	       </h:column>
	        <h:column>
	           <f:facet name="header" >
	               <h:outputText value="Prix"/>
	           </f:facet>    
	           <h:outputText value="#{item.book.price}"/>
	       </h:column>
	    </h:dataTable>
		<h:outputText styleClass="total" rendered="#{display_cart}" value="Total : #{cartController.order.total}" />
		<h:link outcome="cart" styleClass="cart-link" rendered="#{display_cart}" value="Valider/modifier panier" />
		<div class="clearer"></div>
	</p:outputPanel>
	<h:panelGroup id="drop" layout="block" styleClass="ui-widget-content"
					  style="height:75px;width:150px;margin-top:20px;">
	    <p style="margin: 0; padding: 5px;">Glissez les livres ici!</p>
	    <span class="loader"><img src="#{facesContext.externalContext.requestContextPath}/resources/images/loader.gif" /></span>
	    <p:droppable onDrop="handleDrop" datasource="availableProducts">
	    	<p:ajax listener="#{cartController.onDrop}" />
	    </p:droppable>
	</h:panelGroup>
</h:panelGroup>
<div class="clearer"></div>
<p:outputPanel rendered="#{clientController.loggedIn}">
	<ul class="menu">
		<li><h:link outcome="clientOrders" value="Commandes"/></li>
		<li><h:link outcome="contact" value="Formulaire de contact"/></li>
		<li><h:link outcome="localisation" value="Où sommes-nous ?"/></li>			
	</ul>
</p:outputPanel>
</ui:composition>